<template>
  <view>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        事件新建
      </template>
      <div>
        <a-form ref="formRef" :rules="rules" :model="formData">

          <a-form-item field="eventId" label="事件ID" required>
            <a-input v-model="formData.eventId" :max-length="16" />
          </a-form-item>
          <a-form-item field="eventName" label="事件名称" required>
            <a-input v-model="formData.eventName" :max-length="16" />
          </a-form-item>
          <a-form-item field="isAsync" label="开启异步">
            <a-switch v-model="formData.isAsync" checked-value="true" unchecked-value="false" />
          </a-form-item>
          <a-form-item field="eventRange" label="事件范围" required>
            <div class="group-box">
              <a-select class="group-select" v-model="formData.eventRange" placeholder="请选择事件范围" allow-search>
                <a-option v-for="item in eventRangeOptions" :value="item.value" :label="item.label"></a-option>
              </a-select>
            </div>
          </a-form-item>
          <a-form-item field="priority" label="事件优先级" required>
            <a-input-number :style="{ width: '180px' }" placeholder="请输入事件优先级" :default-value="formData.priority"
              mode="button" />
          </a-form-item>
          <a-form-item field="expression" label="触发条件">
            <a-textarea v-model="formData.expression" :max-length="1024" auto-size />
          </a-form-item>
          <a-form-item field="runScript" label="结果处理脚本">
            <a-textarea v-model="formData.runScript" :max-length="1024" auto-size />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </view>
</template>
<script setup>
import useApp from "@/hooks";
import EventApi from "@/api/FlowEvent";
const { $ } = useApp();
const visible = ref(false);
const formRef = ref(null);
$.on('event-create', r => {
  visible.value = true;
})
const formData = ref({
  eventId: '',
  eventName: '',
  eventRange: '',
  expression: '',
  isAsync: false,
  priority: 100,
  runScript: '',
  status: 1
})
// 定义事件范围
const eventRangeOptions = ref([
  {
    label: '全局',
    value: 'ALL'
  },
  {
    label: '内部事件',
    value: 'IN'
  },
  {
    label: '外部事件',
    value: 'OUT'
  }
])
let rules = ref({
  eventId: { required: true, message: "事件ID不可为空", minLength: 2 },
  eventName: { required: true, message: "事件名称不可为空", minLength: 1 },
  eventRange: { required: true, message: "请选择事件范围", minLength: 1 }
});
// 提交
function handleOk() {
  formRef.value.validate((err) => {
    if ($.isEmpty(err)) {
      console.log('校验通过')
      EventApi.createOne(formData.value).then(res => {
        visible.value = false;
        $.message.success('新建成功');
        $.emit('fresh-event', null);
      })
    } else {
      visible.value = true;
    }
  });
}
</script>
<style>
@import "@/styles/ftable.less";
</style>